<!-- Copyright (C) 2012-2025 Zammad Foundation, https://zammad-foundation.org/ -->

<script setup lang="ts">
import type { TicketDuplicateDetectionItem } from '#shared/entities/ticket/types.ts'

interface Props {
  tickets?: TicketDuplicateDetectionItem[]
}

defineProps<Props>()
</script>

<template>
  <CommonAlert variant="warning">
    <div class="flex flex-col gap-1.5">
      <CommonLabel class="text-yellow-600 dark:text-yellow-600" size="large">
        {{ $c.ticket_duplicate_detection_title }}
      </CommonLabel>
      <CommonLabel class="text-yellow-600 dark:text-yellow-600">
        {{ $c.ticket_duplicate_detection_body }}
      </CommonLabel>
      <ul v-for="[id, number, title] in tickets" :key="id" class="list-inside list-disc">
        <li>
          <CommonLabel class="text-yellow-600!">
            <CommonLink
              :link="`/tickets/${id}`"
              class="text-yellow-600 hover:text-yellow-700! hover:dark:text-yellow-500! underline hover:underline!"
              size="medium"
            >
              {{ number }}
            </CommonLink>
            {{ title }}
          </CommonLabel>
        </li>
      </ul>
    </div>
  </CommonAlert>
</template>
